<template>
  <div id="app" :class="{appCart:cartShow}">
    <section class="isPc">
      <div>

        <div class="loading" v-if="isLoading"><span></span></div>
        <vheader v-if="this.$route.path!='/'||!loadFirst" class="header"></vheader>
        <vheader v-else class="header headerIndex" :style="{height: headerH+'px'}"></vheader>
        <router-view></router-view>
        <vfooter></vfooter>
        <vlogin v-if="loginbg"></vlogin>
      </div>
    </section>
    <section class="isWap">
      <div>
        <div class="loading" v-if="isLoading"><span></span></div>
        <headerWap></headerWap>
        <router-view></router-view>
        <vfooter></vfooter>
        <vlogin v-if="loginbg"></vlogin>
      </div>
    </section>
    
  </div>
</template>

<script>
import vheader from '@/components/header'
import headerWap from '@/components/headerWap'
import vfooter from '@/components/footer'
import vloading from '@/components/loading'


import { Cell } from 'vux'
import { mapState } from 'vuex'
import axios from 'axios'

import vlogin from '@/components/login'
import {GetToken} from '@/config/api.js'
import '@/assets/js/rem.js'


export default {
  name: 'app',
  created:function(){
    if(!this.vCheck()){
        this.getToken()
    }else{
        this.getLogin()
    }
  },
  computed: {
    ...mapState({
      isLoading: state => state.isLoading,
      loginbg: state => state.loginbg,
      headerH: state => state.headerH,
      cartShow: state => state.cartStart,
      loadFirst:state => state.loadFirst,
    })
  },
  components:{
  	vheader,vfooter,vlogin,vloading,headerWap
  },
  methods:{
    async getToken(){
        let data= await GetToken()
        let token=data.data.access_token
        var arr = token.split('');
        var passToken = "";
        for (var i = 0; i < token.length; i++) {
          passToken += arr[i].charCodeAt();
          passToken += "/";
        }
        var lastToken = passToken.substring(0, passToken.length - 1)
        var d = new Date();
        d.setTime(d.getTime() + (604800000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = "token" + "=" + lastToken + "; " + expires;
        this.$store.dispatch("tokensync",token);
        window.location.reload();
      },
      getLogin(){
        let login='';
        let name = "login" + "=";
        let ca = document.cookie.split(';');
        for (let i = 0; i < ca.length; i++) {
            let c = ca[i].split("=");
            if(this.trimStr(c[0])=="login"){
                login=c[1];
            }
        };
        if(login!=''){
          //用户已登录
          var miwen = '';
          var arr = login.split("/");
          for(var i in arr){
            miwen += String.fromCharCode(arr[i]);
          }
          console.log('已登录')
          this.$store.dispatch("loginsync",miwen);
        }else{
          console.log('未登录')
        }
      }
  }
}

</script>

<style lang="scss" type="text/css">

.allTitle{text-align: center;line-height: h(90);font-size: h(36);color:#38b6f0;background: #fff;margin-bottom: h(10);position: relative;}
.allTitle a{width: h(90);height: h(90);position: absolute;left: 0;top: 0;background: url('/static/images/heiBack.png') no-repeat;background-size: 100%;}

.loading{text-align: center;padding: h(20)}
.loading span{width: h(120);height: h(120);background: url('/static/images/load.gif');background-size: 100%;display:inline-block;}


.slide-enter-active,.slide-leave-active{
  transition: all .2s
}
.slide-enter{
  transform: translateX(100%)
}
.slide-leave-active{
  transform: translateX(-100%)
}


</style>
